<!--
* @FileDescription: 已选查询条件组件
* @Author: yuec621@outlook.com
* @Date: 2024-12-10 12:22:34
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:22:34
-->
<template>
    <div class="searBox" v-if="listdata.length>0">
        <span class="markBox">已选条件</span>
        <span v-for="(item,index) in listdata" class="bgBoxacSear">
            <span class="labelspan">{{ item.label }}:</span>
            <el-date-picker v-if="item.type==='timeRangepage'" v-model="item.bindData" type="datetimerange"
                start-placeholder="开始时间" end-placeholder="结束时间" />
            <el-select @change="acSearchChange" v-if="item.type==='select'" 
            v-model="item.bindData" clearable placeholder="请选择">
                <el-option v-for="itemsub in item.options" :key="itemsub.value" :label="itemsub.label"
                    :value="itemsub.value">
                </el-option>
            </el-select>
            <el-cascader @change="acSearchChange" v-model="item.bindData" v-if="item.type==='cascadercheckStrictly'" :options="item.options"
                :props="item.props" clearable />
            <el-popover v-if="item.type==='radio'"  placement="bottom">
                <el-radio-group @change="acSearchChange" v-model="item.bindData" style="display: flex;">
                    <el-radio v-for="itemop in item.options" :label="itemop.value"  size="large">{{itemop.label}}
                    </el-radio>
                </el-radio-group>
                <template #reference>
                    <span style="padding: 5.5px;border-radius: 2px; ">{{ item.bindData=='A'?'模拟量':
                        item.bindData=='D'?'开关量':'累积量'}}<svg-icon icon-class="xia"/></span>
                </template>
            </el-popover>
            <svg-icon icon-class="tubiaoneiguanbihover" @click="clearClick(index)" />
        </span>
        <el-button type="text" @click="clearAllClick">清空全部</el-button>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        acSearList: {
            type: Array,
            default: () => {
                return []
            }
        }
    })
    const listdata = computed(() => {
        return props.acSearList
    })
    // 重点
    const state = reactive({
        input: undefined,
        formData: {}
    })

    function clearClick(index) {
        listdata.value[index].bindData=undefined
        listdata.value = listdata.value.splice(index, 1)
         emits('clearAllClick',listdata.value)
    }

    function clearAllClick() {
        emits('clearAllClick',[])
    }
    // 搜索条件添加自动搜索事件查询接口
    function acSearchChange(val){
        console.log(listdata.value,'listdata.value');
        let obj={}
        listdata.value.forEach(item=>{
            obj[item.field]=item.bindData
        })
        emits('acSearchChange',listdata.value,obj)
    }
    watchEffect(() => {
        
    })
</script>
<style lang="scss" scoped>
    .searBox {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 10px 0;

        .markBox {
            white-space: nowrap;
            color: rgba(62, 70, 79, 1);
            font-size: 16px;
            font-weight: 400;
            margin-right: 10px;
        }

        .bgBoxacSear {
            background-color: rgba(68, 136, 255, 0.08);
            border-radius: 2px;
            color: rgba(62, 70, 79, .60);
            font-size: 16px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            margin: 5px 10px 5px 0;


            .labelspan {
                white-space: nowrap;
                margin-right: 10px;
            }
        }
    }

    ::v-deep .el-input__wrapper {
        background: transparent !important;
    }

    ::v-deep .el-input.is-focus,
    ::v-deep .el-input__wrapper.is-focus {
        box-shadow: none !important;
    }
</style>